<template>
     <ul>
        <li  class="recommend-title" v-for="list of List" :key="list.id">
           <img class="item-img" :src="list.imgUrl"/>
           <pre >  {{list.p1}}</pre>
           <pre > {{list.p2}}</pre>
           <button class="bt">查看详情</button> 
           </li>
        </ul> 

</template>
<script>
export default{
    name:"HomeRecommend",
    data(){
        return{
        List:[
            {
                id:'0001',
                imgUrl:"http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_200x200_1bc99086.jpg",
                p1:"故宫",
                p2:"欢迎来到度假圣地，感受魅力,世界五大宫之首，穿越与你尽在咫尺"
               
            },
            {
                 id:'0002',
                imgUrl:"http://img1.qunarzz.com/sight/p0/1608/4f/4fc3f5a1b838f279a3.water.jpg_200x200_e6528ef6.jpg",
                p1:"故宫",
                p2:"欢迎来到度假圣地，感受魅力，亚洲唯一飞行式过山车等你来挑战"
            },
            {
                 id:'0003',
                imgUrl:"http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_200x200_1bc99086.jpg",
                p1:"故宫",
                p2:"欢迎来到度假圣地，感受魅力，老北京的温柔乡，北京签到地"
            },
            {
                 id:'0004',
                imgUrl:"http://img1.qunarzz.com/sight/p0/201308/08/41150dacc0e3a0c8c8d65eac.jpg_200x200_c62292e9.jpg",
                p1:"故宫",
                p2:"欢迎来到度假圣地，感受魅力，不到长城非好汉"
            },
            {
                id:'0005',
                imgUrl:"http://img1.qunarzz.com/sight/p0/1603/85/85c883189bf7293390.water.jpg_200x200_3165123d.jpg",
                p1:"故宫",
                p2:"欢迎来到度假圣地，感受魅力，敢与森林之王近距离接触吗"
            }
        ]
    }
  }
}
</script>
<style lang="stylus" scoped>
.recommend-title
  min-width:0
  height:90px
  .item-img
    float:left
    height:90px
    width:90px
     margin:0rem
  .bt
    margin-left:.5rem
    background:#ff8000
    border:0rem
    color:white
     
</style>